<template>
  <div
    class="_product-list"
    :class="{
      [props.warpperClass]: true,
      _mobile: props.isMobile,
    }"
  >
    <div
      class="_product-item"
      v-for="(product, idx) in props.productList"
      :key="idx"
    >
      <div class="flex items-center justify-between mb-0.56rem">
        <div>{{ product?.spin_probability }}%</div>
        <img
          class="_view"
          :src="ViewGray"
          @click.stop="onOpenProduct(product)"
        />
      </div>
      <div class="flex-1 h-0 px-0.81rem">
        <img
          class="w-full h-full"
          style="object-fit: contain; aspect-ratio: 1/1"
          :src="product?.product?.image"
        />
      </div>
      <div
        class="w-full overflow-hidden whitespace-nowrap mt-0.75rem mb-0.94rem"
        style="text-overflow: ellipsis"
      >
        {{ product?.product?.name }}
      </div>
      <price-btn :price="Number(product?.product?.amount || 0)" />
    </div>
  </div>

  <product-detail
    v-model:open="productModal.toggle"
    :record="productModal.record?.product"
    :out-come="productModal.record?.spin_probability"
    :width="props.producetWith"
    @clear="productModal.record = {}"
  />
</template>

<script lang="tsx" setup>
import ViewGray from "@/assets/view-gray.png";
import PriceBtn from "@/components/PriceBtn/price-btn.vue";
import ProductDetail from "@/components/ProductDetail/productDetail.vue";
import { useModalToggle } from "@/hooks/useModalToggle";

import { boxProductListProps } from "./boxProductList";

const props = defineProps(boxProductListProps);

const { modalToggleInfo: productModal, onOpenModal: onOpenProduct } =
  useModalToggle<API.BOX.BoxShowProductItem>();
</script>

<style lang="less" scoped>
._product-list {
  @apply flex flex-wrap items-stretch;
  gap: 1.25rem;
  ._product-item {
    @apply flex flex-col justify-between text-hex-9D9D9D cursor-pointer;
    padding: 0.44rem 0.56rem 0.75rem;
    width: calc((100% - 1.25rem * 4) / 5);
    aspect-ratio: 11.44 / 13.31;
    min-height: 0;
    font-size: 0.88rem;
    line-height: 1rem;
    background: #373a3b;
    border-radius: var(--el-border-radius-base);
  }

  ._view {
    width: 1.59rem;
    height: 1.59rem;
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
    &:active {
      opacity: 0.6;
    }
  }

  &._mobile {
    gap: 0.81rem;
    ._product-item {
      width: calc((100% - 0.81rem) / 2);
    }
  }
}
</style>
